<template>
  <div id="app" class="booking-container">
    <div class="header">
      <div class="title">{{this.hotel.hotelName}}</div>
    </div>
    <div class="date-selection">
      <div>
        <p>入住日期：{{hotel.checkInDate}}</p>
        <p>离店日期：{{hotel.checkOutDate }}</p>
      </div>
    </div>
    <div class="room-info">
      <span>经济大床房</span>
      <span>大床 · 无早餐 点 2人入园 · 10-15㎡ · 有窗 · 禁烟</span><br>
      <span>√15分钟内可免费取消</span>
    </div>
    <div class="order-must-read">
      <i>!!订房必读</i>  <div class="hotel-detail-link" @click="showDetails">查看全部></div>
      <ul>
        <li>防疫期间，疫情接待政策受各地疫情变化影响，请在下单前...</li>
        <li>酒店只接待大陆客人</li>
        <li>您填写的预定信息和联系方式是酒店提供相关服务的重要...</li>
      </ul>
    </div>
    <div id="app" class="tips-container">
      <div class="tip-item">
        <div class="tip-icon price-lowest">🔥</div>
        <div class="tip-text">价格最低<br>赞！您已选择本店最划算的客房！</div>
      </div>
      <div class="tip-item">
        <div class="tip-icon room-tension">⚠️</div>
        <div class="tip-text">客房紧张<br>该客房仅剩最后1间了，在不下单就没了</div>
      </div>
      <div class="tip-item">
        <div class="tip-icon express-refund">✅</div>
        <div class="tip-text">极速退<br>放心订！预定成功后15分钟内可免费退款</div>
      </div>
    </div>
    <div id="app" class="check-in-info">
      <div class="info-item">
        <label>房间数量</label>
        <select v-model="roomCount">
          <option v-for="count in roomOptions" :key="count" :value="count">{{ count }}间（每间最多住2人）</option>
        </select>
      </div>
      <div class="info-item">
        <label>住客姓名</label>
        <input type="text" v-model="rooms.name" placeholder="请输入姓名">
      </div>
      <div class="info-item">
        <label>联系电话</label>
        <input type="text" v-model="rooms.phoneNumber" placeholder="请输入联系电话">
      </div>
      <div class="info-item">
        <label>预计到店</label>
        <div class="date-picker-item">
          <input type="date" v-model="rooms.haveTime">
        </div>
      </div>
    <div class="currentPrice">
      <div class="price-info">
        <span>价格</span>
        <span>¥{{room.currentPrice}}</span>
      </div>
      <button class="submit-order" @click="submitOrder">提交订单</button>
    </div>
    </div>
</div>
</template>
<script>
import axios from "axios";


export default {
  props: ['checkInDate', 'checkOutDate'],
  computed: {
    checkInDate() {
      return this.formatDate(this.checkInDate);
    },
    checkOutDate() {
      return this.formatDate(this.checkOutDate);
    }
  },
  data() {
    return {
      roomOptions: [1, 2, 3, 4],
      roomCount: 1,
      room:{
        currentPrice: 158
      },
      jiudianId:this.$route.query.jiudianid,
      fangjianId:this.$route.params.fangjianid,
      hotel: {},
      rooms:{
        userId:1,
        orderType:"酒店住宿",
        orderStatus:"待使用",
        totalPrice:"",
        orderTime:"",
        haveTime:"",
        relatedId:"1",
        imgUrl:"",
        dingdanName:"",
        orderNo:""

      },
    };
  },
  methods: {
   //添加订单
    submitOrder() {
      console.log(this.rooms)
      this.axios.post('http://localhost:1000/order/addOrder',this.rooms).then(res => {
        if (res.data.code == 200) {
          alert("下单成功");
          this.$router.push({ path: '/order' });
        } else {
          alert("下单失败");
        }
      })
    },

    //←返回跳转上一页的方法
    goBack() {
      this.$router.go(-1);
    },

    formatDate(date) {
      const d = new Date(date);
      const month = d.getMonth() + 1;
      const day = d.getDate();
      return `${month.toString().padStart(2, '0')}月${day.toString().padStart(2, '0')}日`;
    },
  },
  created() {
    console.log(111111111111)
    console.log(this.jiudianId)
    console.log("房间id")
    console.log(this.fangjianId)
    this.axios.get('http://localhost:1000/hotel/findById/'+this.jiudianId).then(res => {
      this.hotel = res.data.data;
      console.log("酒店信息")
      console.log(this.hotel)
    })
    this.axios.get('http://localhost:1000/hotel/findRoomById/'+this.fangjianId).then(res => {
      this.room = res.data.data;
      console.log("房间信息")
      console.log(this.room)
      this.rooms.totalPrice=this.room.currentPrice;
      this.rooms.dingdanName=this.room.roomType;

    })
  }
}
</script>
<style>
.booking-container {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}
.date-selection {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0);
  color: black;
  padding: 5px;
  border-radius: 5px;
}
.room-info {
  margin-bottom: 10px;
}
.order-must-read {
  color: red;
  margin-bottom: 10px;
}
.price-info {
  color: red;
  font-weight: bold;
  margin-bottom: 10px;
}
.check-in-info {
  margin-bottom: 10px;
}
.price {
  color: red;
  font-weight: bold;
  margin-bottom: 10px;
}
.submit-order {
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
}
.submit-order:hover {
  background-color: #0056b3;
}
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.check-in-info {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}
.info-item {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.info-item label {
  width: 80px;
}
.info-item input, .info-item select {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.submit-order {
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
  border: none;
  cursor: pointer;
  width: 100%;
  border-radius: 5px;
}
.submit-order:hover {
  background-color: #0056b3;
}
.tips-container {
  width: 300px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.tip-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.tip-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.price-lowest {
  background-color: #ff5722;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.room-tension {
  background-color: #ff9800;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.express-refund {
  background-color: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tip-text {
  flex: 1;
}
</style>
